html {
    --gap-width: 24px;

    /* 动画相关 */
    --animation-long-time: 500ms;
    --animation-standard-time: 390ms;
    --animation-enter-time: 300ms;
    --animation-leave-time: 285ms;
}
body {
    /* background: red; */
}
.container {
    --md-1-width: calc((100% - 13 * var(--gap-width)) / 12);
    --md-2-width: calc((100% - 13 * var(--gap-width)) / 6 + var(--gap-width));
    --md-3-width: calc((100% - 13 * var(--gap-width)) / 4 + var(--gap-width) * 2);
    --md-4-width: calc((100% - 13 * var(--gap-width)) / 3 + var(--gap-width) * 3);
    --md-5-width: calc((100% - 13 * var(--gap-width)) * 5 / 12 + var(--gap-width) * 4);
    --md-6-width: calc((100% - 13 * var(--gap-width)) / 2 + var(--gap-width) * 5);
    --md-7-width: calc((100% - 13 * var(--gap-width)) * 7 / 12 + var(--gap-width) * 6);
    --md-8-width: calc((100% - 13 * var(--gap-width)) * 2 / 3 + var(--gap-width) * 7);
    --md-9-width: calc((100% - 13 * var(--gap-width)) * 3 / 4 + var(--gap-width) * 8);
    --md-10-width: calc((100% - 13 * var(--gap-width)) * 5 / 6 + var(--gap-width) * 9);
    --md-11-width: calc((100% - 13 * var(--gap-width)) * 11 / 12 + var(--gap-width) * 10);
    --md-12-width: calc(100% - 2 * var(--gap-width));
    --md-1-left: calc(var(--md-1-width) + 2 * var(--gap-width));
    --md-2-left: calc(var(--md-2-width) + 2 * var(--gap-width));
    --md-3-left: calc(var(--md-3-width) + 2 * var(--gap-width));
    --md-4-left: calc(var(--md-4-width) + 2 * var(--gap-width));
    --md-5-left: calc(var(--md-5-width) + 2 * var(--gap-width));
    --md-6-left: calc(var(--md-6-width) + 2 * var(--gap-width));
    --md-7-left: calc(var(--md-7-width) + 2 * var(--gap-width));
    --md-8-left: calc(var(--md-8-width) + 2 * var(--gap-width));
    --md-9-left: calc(var(--md-9-width) + 2 * var(--gap-width));
    --md-10-left: calc(var(--md-10-width) + 2 * var(--gap-width));
    --md-11-left: calc(var(--md-11-width) + 2 * var(--gap-width));
}
.col-md-1 {
    width: var(--md-1-width);
}
.col-md-2 {
    width: var(--md-2-width);
}
.col-md-3 {
    width: var(--md-3-width);
}
.col-md-4 {
    width: var(--md-4-width);
}
.col-md-5 {
    width: var(--md-5-width);
}
.col-md-6 {
    width: var(--md-6-width);
}
.col-md-7 {
    width: var(--md-7-width);
}
.col-md-8 {
    width: var(--md-8-width);
}
.col-md-9 {
    width: var(--md-9-width);
}
.col-md-10 {
    width: var(--md-10-width);
}
.col-md-11 {
    width: var(--md-11-width);
}
.col-md-12 {
    width: var(--md-12-width);
}
.col-md-span-1 {
    margin-left: var(--md-1-left);
}
.col-md-span-2 {
    margin-left: var(--md-2-left);
}
.col-md-span-3 {
    margin-left: var(--md-3-left);
}
.col-md-span-4 {
    margin-left: var(--md-4-left);
}
.col-md-span-5 {
    margin-left: var(--md-5-left);
}
.col-md-span-6 {
    margin-left: var(--md-6-left);
}
.col-md-span-7 {
    margin-left: var(--md-7-left);
}
.col-md-span-8 {
    margin-left: var(--md-8-left);
}
.col-md-span-9 {
    margin-left: var(--md-9-left);
}
.col-md-span-10 {
    margin-left: var(--md-10-left);
}
.col-md-span-11 {
    margin-left: var(--md-11-left);
}
.ripple:hover::before {
    content: "";
    position: absolute;
    left:0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .1);
}
[role="dropdown"]:hover .dropdown-list {
    display: none;
    /* max-height: 0; */
}
[role="dropdown"][show] .dropdown-list {
    display: block;
}